﻿<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>总部HSE日常管理</title>
    <!-- 公共 js CSS 文件 -->
    <script src="../static/js/common.js"></script>
    <!--<script src="../static/js/UEditor/ueditor.config.js" type="text/javascript"></script>
    <script src="../static/js/UEditor/ueditor.all.min.js" type="text/javascript"></script>
    <script src="../static/js/UEditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>-->

    <script src="/static/js/wangEditor.min.js" type="text/javascript"></script>

    <link href="/static/js/wangEditor.min.css" rel="stylesheet" />



</head>

<body>
    <div id="app">
        <div id="editor">
            <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
        </div>

        <button id="btn1" @click="showhtml">获取html</button>
        <button id="btn2" @click="showtext">获取text</button>

        <p v-html='value'></p>


    </div>
    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->

    <script type="text/javascript">
        var E = window.wangEditor
        var app = new Vue({
            el: '#app',
            data: {
                value: '<p>用 JS 设置的内容fuykfjkfgjy</p><table border="0" width="100% " cellpadding="0" cellspacing="0"><tbody><tr><th>sdfsdf&nbsp;</th><th>dsf&nbsp;</th><th>sdfsdf&nbsp;</th><th>&nbsp;sDFsDF</th><th>&nbsp;</th></tr><tr><td>&nbsp;sdF</td><td>&nbsp;sDFsdf</td><td>&nbsp;fsdf</td><td>&nbsp;fdsfdsf</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table><p><br></p><p>sdfdsA<br>Fsd</p><p>fsd</p><p>fsdf</p>',
                editor: ""

            },

            mounted: function () {
                this.editor = new E('#editor');
                this.editor.customConfig.menus = [
                    'head',  // 标题
                    'bold',  // 粗体
                    'fontSize',  // 字号
                    'fontName',  // 字体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'list',  // 列表
                    'justify',  // 对齐方式
                    'table',  // 表格
                    'undo',  // 撤销
                    'redo'  // 重复
                ];
                this.editor.create();
                this.editor.txt.html();
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                showhtml: function () {
                    
                    this.value = this.editor.txt.html();
                },
                showtext: function () {

                    alert(this.editor.txt.text())
                    
                }
            }
        });



               






    </script>

    <!--追加内容
    创建编辑器之后，可使用editor.txt.append('<p>追加的内容</p>')继续追加内容。

    清空内容
    可使用editor.txt.clear()清空编辑器内容-->
    <!--<h1>自定义toolbar实例</h1>
    <div>
    <script id="editor" type="text/plain">
    </script></div>
    <p><button onclick="getContent(0)">获取UE内容</button></p>
    <h1>完整toolbar实例</h1>
    <div>
    <script id="editor1" type="text/plain">
    </script></div>
    <p><button onclick="getContent(1)">获取UE内容</button></p>


    <script type="text/javascript">

        //实例化编辑器,自定义toolbar实例
        var ue = UE.getEditor('editor', {
            //设置工具栏按钮：全屏，源代码，撤销，重做，加粗，斜体，下划线，删除线，字符边框
            toolbars: [['FullScreen', 'Source', 'Undo', 'Redo', 'Bold', 'italic', 'underline', 'test', 'strikethrough', 'fontborder']],
            //初始化编辑器的内容！
            initialContent: '欢迎访问:https://rattenking.github.io/demo/editor/index.html',
            //初始化时，是否让编辑器获得焦点true或false
            focus: false,
            //focus时自动清空初始化时的内容
            autoClearinitialContent: true,
            //编辑器层级的基数,可以用来改变字体等
            initialStyle: 'p{line-height:1em}',
            //提交到后台的数据是否包含整个html字符串
            allHtmlEnabled: false,
            //默认的编辑区域宽度
            initialFrameWidth: null,
            //默认的编辑区域高度
            initialFrameHeight: 250

        });
        //完整toolbar实例
        //实例化一个不带ui的编辑器,注意此处的实例化对象是baidu.editor下的Editor，而非baidu.editor.ui下的Editor
        var myeditor = UE.getEditor('editor1');
        var obj = null;
        if (num === 0) {
            obj = ue;
        } else if (num === 1) {
            obj = myeditor;
        }

        //获取UE内容
        function getContent(num) {

            var str = obj.getContent();
            alert(str);
        }
    </script>-->
</body>
</html>
